<template>
    <div>我是app</div>
    <div>{{ count }}</div>
    <div>{{ money }}</div>
    <div>obj: {{ obj }}</div>
    <button @click="handleClick">改名字</button>
</template>
<script>
export default {
    setup() {
        // 1. setup 函数是一个新的组件选项, 作为组件中 compositionAPI 的起点
        // 2. 从生命周期角度来看, setup 会在 beforeCreate 钩子函数之前执行
        // 3. setup 中不能使用 this, this 指向 undefined ===>>> vue3 不需要使用this
        // 4. 在模版中需要使用的数据和函数，需要在 setup 返回。


        // vue3 中定义的变量, 就是在提供数据(默认提供的不是响应式的数据!!!)
        const count = 0
        const money = 100
        const obj = {
            name: '老王',
            age: 67
        }
        const handleClick = () => {
            console.log(123)
            obj.name = '老李'
        }
        // 返回的数据才能在模板中使用
        return {
            count,
            money,
            obj,
            handleClick
        }
    }
}
</script>
